<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/list1.css">
    <title>Document</title>
</head>
<body>
    
    <div class="top">
        <div>
            
            <img src="image/2.png" alt="">
            <p>网络全案营销服务提供商</p>
            
        </div>
        <ul>
            <li><a href="index.html">网站首页</a></li>
            <li><a href="">传悦资源</a></li>
            <li><a href="list1.html">传悦案例</a></li>
            <li><a href="secion1.html">解决方案</a></li>
            <li><a href="">需求提交</a></li>
        </ul>
    </div>
    
    <div class="pic">
        <div class="pic-1">
            <div class="pic-2">
            <span class="span1">网站首页 ></span>
            <span class="span2">传悦案例</span>
            </div>
        </div>
    </div>
    <div class="box">
    <ul class="ul1">
        <li><a>网站建设</a></li>
        <li><a>推广运营</a></li>
        <li><a>品牌策划</a></li>
        <li><a>网络全案</a></li>
    </ul>

    <ul class="ul2" >
        <li id="li" style="display: none;">
            <a href="list2.html">
            <img src="image/list1.png" alt="" class="img">
            <h3 class="title">众德集团 网站建设</h3>
            <p class="value">网站建设  品牌形象  整合营销  引导销售</p>
            </a>
        </li>
    </ul>
</div>
    <div class="bottom">
        <img src="image/2.png" alt="">
        <ul>
            <li>关于传悦</li>
            <li>新闻动态</li>
            <li>传悦观点</li>
            <li>联系传悦</li>
            <li>加入传悦</li>
            <li>付款账户</li>
        </ul>
        <p>Copyright ©2013  创梦网络科技有限责任公司  ‖  传悦 Chnyoo.cn All Rights Reser</p>
    </div>
</body>
</html>
<script>
    let oul1 = document.querySelectorAll(".ul1 li a");
    let a = document.querySelector(".ul2 #li a");
    let tbody = document.querySelector("body")
    function fun(index){
        for(let i = 0;i < oul1.length;i++){
            oul1[i].style.color = "#707070";
            oul1[i].style.backgroundColor = "#ffffff";
        }
        oul1[index].style.color = "white";
        oul1[index].style.backgroundColor = "#dd4012";
    }
    oul1[0].onclick = function(){
        fun(0)
    }
    oul1[1].onclick = function(){
        fun(1)
    }
    oul1[2].onclick = function(){
        fun(2)
    }
    oul1[3].onclick = function(){
        fun(3)
    }

    let http = new XMLHttpRequest();
    let li = document.getElementById("li");
    let ul2 = document.querySelector(".ul2")
    http.open("get",`http://10.35.164.163:81/listList`);
    http.send();
    http.onreadystatechange = function(){
        if(http.readyState === 4){
            let list = JSON.parse(http.responseText)
            list.forEach(function(item){
                let newli = li.cloneNode(true);
                newli.id = "";
                newli.style.display = "block";
                ul2.appendChild(newli);
                newli.querySelector(".img").src = item.img;
                newli.querySelector(".title").innerHTML = item.title;
                newli.querySelector(".value").innerHTML = item.value;
                newli.id = item.id;
                
                    newli.onclick = function(){
                    let id = newli.id
                //    console.log(id)
                    let http = new XMLHttpRequest();
                    http.open("get",`http://10.35.164.163:81/click?id=${id}`)
                    http.send();
                    http.onreadystatechange = function(){
                        if(http.readyState === 4){

                        }
                    }
                }
                
                
            })
        }
    }
    // tbody.onclick = function(event){
    //   let _this = event.target;
    //   if(_this.tagName ==="LI"){
    //     alert(1)
    //   }
    // }
</script>